<template>
  <div>
    <h1>{{ count }}</h1>
    <h1>{{ state.count }}</h1>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "ref",
  setup() {
    // 将一个内部的值 返回一个可变的ref对象
    // 使用.value 访问ref对象的值 或者更改值
    const count = ref(0);
    const otherCount = ref(2);
    console.log("🍌ref🍌" + count.value);
    count.value = 1;
    console.log("🍌ref🍌" + count.value);
    // 如果在ref中初始化一个对象 会自动使用reactive方法来创建
    // 但是在访问时要使用 .value.key 来访问
    const refObj = ref({
      a: 1,
      b: 2,
    });
    // 如果用reactive包装ref对象,那么访问时会自动展开 不用再使用.value去访问 像一个正常对象访问就可以
    const state = reactive({
      count,
    });
    console.log("🍌reactive + ref🍌" + state.count);
    state.count = otherCount;
    console.log("🍌ref🍌" + refObj.value.b);
    console.log("🍌ref🍌" + count.value);
    console.log("🍌reactive + ref🍌" + state.count);
    // return 出的值会自动合并到render函数执行机上下文中
    // 在template中访问ref值 会自动将value展开 不需要用.value再访问了

    // 如果是一个新的ref赋值给reactive包裹的ref 当前的值会更新 但是原来的ref值还是原来的值

		// 如果用reactive包装ref对象,那么访问时会自动展开 不用再使用.value去访问
		// 当时如果当reactive中放入的时一个数组或者像是Map这样的原生集合，在这类数据类型内部放入了ref 则不会自动展开
		const arr = reactive([ref(0)])
		console.log("🍌reactive([ref(0)])==>arr[0].value🍌" + arr[0].value);
    return {
      count,
      state,
    };
  },
};
</script>

<style></style>
